/* eslint-disable no-unused-vars */
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" :xs="24" class="cav-map">
        <div
          id="cesiumContainer"
          v-loading="loading"
          element-loading-text="构建三维模型中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          v-show="cesiumShow"
        ></div>
        <div id="map" v-show="!cesiumShow"></div>
        <div class="left-list-group">
          <div
            class="content-list"
            :class="showLeftList ? '' : 'contentHiddenList'"
          >
            <el-card shadow="never" class="dataListItem">
              <div class="projectManages proDataList">
                <!-- <el-tabs v-model="showTable" type="card"  @tab-click="handleClick" >
                                        <el-tab-pane label="数据列表" name="proDataList" class="proDataList"> -->
                <div class="projectName">
                  <span class="name" :title="projectName">
                    {{ projectName }}
                  </span>
                  <el-button
                    size="mini"
                    @click="resetproject"
                    class="projectBtn"
                    >切换项目</el-button
                  >
                </div>
                <el-tree
                  show-checkbox
                  :props="zoneMethodsProps"
                  :default-expanded-keys="defaultExpandedKeys"
                  node-key="id"
                  :data="zoneMethods"
                  ref="tree"
                  class="proZtree"
                  :check-strictly="false"
                  @node-click="closeMenu"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <template v-if="data.methodName != null">
                      <span>{{ node.label }}</span>
                      <span class="uploadIcon">
                        <el-button
                          type="text"
                          size="medium"
                          icon="el-icon-upload"
                          @click.stop="() => openUploadPage(data, node)"
                        >
                        </el-button>
                      </span>
                    </template>
                    <template v-else-if="data.phase != null">
                      <span class="checkbox">
                        <input
                          name="circle"
                          type="checkbox"
                          @click="dataListItemClick($event, data)"
                          :value="data.phase"
                        />
                      </span>
                      <span>{{ node.label }}</span>
                    </template>
                    <template v-else>
                      <span>{{ node.label }}</span>
                    </template>
                  </span>
                </el-tree>
                <!-- </el-tab-pane> -->
                <!-- <el-tab-pane label="课题二数据" name="proDataList2">
                                            <ul class="project-list project-list--text">      
                                                <li tabindex="0" class="project-list__item" v-for="(item,index) in topicTow" :key="index" :class="[index === topicCurrent? 'a-focus':'']">
                                                    <a class="project-list__item-name" @click="topicCheckChange(item,index,$event)" >{{item.name}}</a>
                                                </li>
                                            </ul>
                                        </el-tab-pane>
                                    </el-tabs>    -->
              </div>
            </el-card>
            <div class="content-list-show">
              <el-button size="mini" class="button" @click="taggleLeftList">
                <i
                  :class="
                    showLeftList ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
                  "
                ></i>
              </el-button>
            </div>
          </div>
        </div>
        <!-- <div class="erro-list-group">
                    <div class="erro-list" :class="showErroList?'':'hiddenList'" >
                        <div class="erro-list-show">
                            <el-button size="mini" class="button" @click="taggleErroList" >
                                <i :class="showErroList?'el-icon-caret-bottom':'el-icon-caret-top'"></i>
                            </el-button>
                        </div>
                        <el-tabs type="border-card"  v-model="editableTabsValue">
                            <el-tab-pane label="遥感" name="遥感" v-if="historyImageList.length">
                                <history-list  :dataToSite="dataToSite" :flyToFeature="flyToFeature" :dataList="historyImageList" @listenSelectChange="selectChange"  />
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div> -->
        <div class="right-list-group">
          <div
            class="content-list"
            :class="showRightList ? '' : 'contentHiddenList'"
          >
            <div class="content-list-show">
              <el-button size="mini" class="button" @click="taggleRightList">
                <i
                  :class="
                    showRightList ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
                  "
                ></i>
              </el-button>
            </div>
            <showconfig
              :dataList="historyImageList"
              @listenSelectChange="selectChange"
            />
          </div>
        </div>
        <div class="block" v-if="pnameList.length">
          <span class="icon" @click="closeWms">清除</span>
          <div class="row">
            <el-radio-group v-model="radio" @change="changePic">
              <el-radio
                class="el_radio"
                v-for="(item, index) in pnameList"
                :key="index"
                :label="item"
                >{{ item }}</el-radio
              >
            </el-radio-group>
          </div>
          <div class="row">
            <span>深度选择：</span>
            <el-slider
              class="slider"
              v-model="sliderValue"
              range
              @change="changePic"
              show-stops
              :min="0"
              :step="0.1"
              :max="this.pheightList"
            >
            </el-slider>
          </div>
        </div>
        <popup @showImg="openERTImage" @close="closePopup"></popup>
      </el-col>
    </el-row>
    <!-- --------------------------------------------------------------tsg--------------------------------------------------------------------------------- -->
    <el-dialog
      title="项目选择"
      :visible.sync="selectProject"
      :close-on-click-modal="false"
      custom-class="dialogBox"
      width="30%"
      append-to-body
    >
      <div class="selectProjectBox">
        <div v-for="(item, index) in projectListData" :key="index">
          <el-radio v-model="checkedProject" :label="item" size="medium">{{
            item.projectName
          }}</el-radio>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 绘图页面 -->
    <!-- <el-dialog
            title="反演图"
            v-dialogDrag
            :visible.sync="showImage"
            :modal="false"
            :close-on-click-modal="false"
            custom-class="dialogBox"
            append-to-body>
            <div class="selectProjectBox">
                <canvasDraw/>
            </div> -->
    <!-- <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    type="primary"
                    @click="submit"
                >确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div> -->
    <!-- </el-dialog> -->
  </div>
</template>
<script>
import {
  projectZtree,
  getRouteList,
  getEmData,
  getPname,
  getDepthRange,
  getRenderDrillImg,
} from "@/api/data/proData";
import { getProjectPhase } from "@/api/data/proDataForup";
import FeatureStyle from "@/assets/dist/FeatureStyle";
import popup from "./popup/index";
import canvasDraw from "./popup/drawCanvas";
import detailList from "./detail/detailList";
import showconfig from "./methodConf/index";
import historyList from "./detail/historyList";
import * as Cesium from "cesium/Cesium";
import * as widgets from "cesium/Widgets/widgets.css";
import EChartsLayer from "ol3-echarts";
import { listProject } from "@/api/project/project";
export default {
  name: "Data",
  components: {
    popup,
    detailList,
    showconfig,
    historyList,
    canvasDraw,
  },
  data() {
    return {
      //课题二数据
      topicTow: [
        { name: "反距离权重-idw", id: "1" },
        { name: "3D克里格 -ok", id: "2" },
        { name: "径向基函数插值 -rbf", id: "3" },
        { name: "随机森林和模型插值混合-rfidw", id: "4" },
        { name: "随机森林 -rf", id: "5" },
      ],
      //是否显示
      visible: false,
      //右击出现位置
      left: 250,
      top: "",
      //右击目标url
      tagRight: "",
      //展示表头
      showTable: "proDataList",
      //项目详情
      projectDatail: {},
      //项目树形图
      proZtreeData: [],
      //数据树形图
      dataZtree: [],
      //数据默认选中
      dataCheck: [],
      //默认展开和选中
      isCheck: [],
      //ztree过滤参数
      filterText: "",
      //项目ztree默认配置
      defaultProps: {
        children: "zoneList",
        label: "label",
      },
      //当前显示地图类型
      showMapType: this.$store.state.showMapType,
      //异常数据列表
      errorData: [],
      //污染调查数据
      siteData: {},
      //ert数据列表
      ertDataList: [],
      //污染调查数据列表
      siteDataList: [],
      //选中标记
      current: 0,
      //变量
      MyMap: undefined,
      selectSingleClick: {},
      wktLayers: {},
      vetorList: [],
      overlay: undefined,
      //分区id
      zoneId: null,
      //cesium地图对象
      viewer: undefined,
      //cesium地图是否显示
      cesiumShow: true,
      // 数据勾选右侧展示==============tsg======================
      projectId: undefined,
      //方法
      zoneMethods: [],
      //方法对象
      zoneMethodsProps: {
        children: "children",
        label: "name",
      },
      //加载蒙版
      loading: false,
      //点集数据集
      pointPrimitives: undefined,
      //课题二标题显示
      topicCurrent: undefined,
      // 数据勾选右侧展示==============tsg======================
      //默认展开显示数据
      defaultExpandedKeys: [],
      //当前数据类别
      dataToSite: {},
      //遥感影像
      wmsLayerLisy: [],
      //钻孔数据值
      pnameList: [],
      //钻孔高度范围
      pheightList: 15,
      //钻孔高度范围
      sliderValue: [0, 14],
      //钻孔数据值选项
      radio: "",
      //钻孔图层url
      layerImgUrl: "",
      //数据管理页面参数
      uploaddata: {},
      //历史映像
      historyImageList: [],
      //列表显示
      showErroList: false,
      //右侧列表显示
      showRightList: false,
      //显示列表
      editableTabsValue: "",
      //列表种类
      tablesList: [],
      //echart列表
      echartlayers: undefined,
      //项目列表
      projectListData: [],
      //项目列表是否出现
      selectProject: false,
      //项目选择
      checkedProject: "",
      projectName: null,
      //左侧数据栏
      showLeftList: true,
      //反演图展示
      showImage: false,
      //popup对象
      addDiv: null,
      isInit: null,
      removeHandler: null,
      c: null,
      //弹窗是否展示
      isShow: false,
      //绘制所有图形id结合
      geoIds: [],
      //历史影像显示对象id
      historygeoId: null,
      //ert侧线配置
      Ertpointobj: {
        //ert电极是否显示
        checked2: false,
        width: 5,
        color: "rgba(255,0,0,1)",
        checkedErro: false, //是否显示表注异常
        checked3D: false, //是否显示3d模型
      },
      //贴图
      mypicture: require("@/assets/images/canvas.png"),
    };
  },
  created() {
    this.projectId = this.$route.query.projectId;
    this.projectName = this.$route.query.projectName;
    this.getProjectList();
    if (this.projectId == undefined) {
      this.selectProject = true;
    } else {
      this.dataToSite.projectId = this.projectId;
      this.getZoneLists();
    }
  },
  mounted() {
    // this.createMap();
    this.setCesiumMap();
    this.initTool(this.viewer.cesiumWidget.container);
  },
  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener("scroll", this.closeMenu);
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    //显示地图类型切换
    showMapType(val) {
      this.$store.state.showMapType = val;
    },
    //异常列表变换绘点
    errorData(val) {
      val.forEach((data) => {
        this.drawWKT(data, "abnormalId", "abName");
      });
    },
    //项目id切换
    projectId(val) {
      this.getZoneLists();
    },
    //三维地图切换清除数据
    cesiumShow(val) {
      if (!val && this.pointPrimitives) {
        this.pointPrimitives.removeAll();
      }
    },
    //数据点击切换
    tablesList(val) {
      debugger
      if (val.length) {
        this.editableTabsValue = val[val.length - 1];
      }
    },
    //遥感数据变化
    historyImageList(val) {
      if (val.length) {
        this.showRightList = true;
      }
    },
  },
  methods: {
    /**
     * 添加全球地形
     */
    addTerrain() {},
    /**
     * 添加钻孔图层
     */
    addCylinderEntity(cylinderData) {
      cylinderData.forEach((item, index) => {
        let coord = item.geometry.coordinates;
        let newCoord = coord.slice(1, coord.length - 1).split(",");
        let lon = Number(newCoord[0]); //经度
        let lat = Number(newCoord[1]); //纬度
        let startDepth = item.properties.start_depth; //起始深度
        let endDepth = item.properties.end_depth; //结束深度
        let geoMaterial = item.properties.geo_material; //土壤类型
        this.createCylinder(lon, lat, startDepth, endDepth, geoMaterial, index);
      });
    },
    /**
     * 移除钻孔图层
     */
    removeCylinderEntity(cylinderData) {
      cylinderData.forEach((item, index) => {
        let cylinderEntID = this.viewer.entities.getById("cylinder" + index);
        this.viewer.entities.remove(cylinderEntID);
      });
    },
    /**
     * 创建钻孔实体
     */
    createCylinder(x, y, startDepth, endDepth, material, index, radius) {
      let materialColor = "";
      switch (material) {
        case "杂填土":
          materialColor = Cesium.Color.GREEN.withAlpha(1);
          break;
        case "粘质粉土":
          materialColor = Cesium.Color.YELLOW.withAlpha(1);
          break;
        case "粉土":
          materialColor = Cesium.Color.RED.withAlpha(1);
          break;
        case "粉质粘土":
          materialColor = Cesium.Color.BLUE.withAlpha(1);
          break;
      }

      let start = parseFloat(startDepth);
      let end = parseFloat(endDepth);
      let altitude = parseFloat((end - start) / 2 + start);
      let cylinder = this.viewer.entities.add({
        name: "startDepth:" + startDepth + " endDepth:" + endDepth,
        id: "cylinder" + index,
        position: Cesium.Cartesian3.fromDegrees(x, y, altitude),
        cylinder: {
          length: parseFloat(endDepth) - parseFloat(startDepth),
          topRadius: radius || 2,
          bottomRadius: radius || 2,
          material: materialColor,
          outline: false,
        },
      });
    },
    /**
     * 添加线墙图层ERT
     */
    addWallEntity(lineArr) {
      lineArr.forEach((item) => {
        let coordArr = item.geometry.coordinates;
        let positionArr = [].concat.apply([], coordArr);
        let name = item.properties.name;
        //wallLineArr = coord
        let imageUrl = item.properties.pic;
        // let newImage = drawCloudCanvas(imageUrl)
        this.createWall(positionArr, imageUrl, name);
      });
    },
    /**
     * 移除线墙图层 ERT
     */
    removeWallEntity(lineArr) {
      lineArr.forEach((item) => {
        let wallEntID = this.viewer.entities.getById(item.properties.name);
        this.viewer.entities.remove(wallEntID);
      });
    },
    /**
     * 创建线墙实体 ERT
     */
    createWall(positionArr, imageUrl, name) {
      let colorWall = this.viewer.entities.add({
        label: {
          text: name,
          show: true,
          showBackground: true,
          font: "14px monospace",
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.TOP,
          pixelOffset: new Cesium.Cartesian2(15, 0),
        },
        id: name,
        //position: Cesium.Cartesian3.fromDegrees(x, y, z),
        wall: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(positionArr),
          material: new Cesium.ImageMaterialProperty({
            image: imageUrl,
            transparent: true,
          }),
        },
      });
    },
    /**
     * 添加面图层
     */
    addPolygonEntity(polygonArr) {
      polygonArr.forEach((item) => {
        let materialUrl = item.properties.pic;
        let coordArr = item.geometry.coordinates;
        let positionArr = [].concat.apply([], coordArr);
        let name = item.properties.name;
        this.createPolygon(positionArr, materialUrl, name);
      });
    },
    /**
     * 移除面图层
     */
    removePolygonEntity(polygonArr) {
      polygonArr.forEach((item) => {
        let polyEntID = this.viewer.entities.getById(item.properties.name);
        this.viewer.entities.remove(polyEntID);
      });
    },
    /**
     * 创建面实体
     */
    createPolygon(positionArr, url, name) {
      let polygon = this.viewer.entities.add({
        id: name,
        polygon: {
          //按逆时针方向排序，从左下角开始
          hierarchy: Cesium.Cartesian3.fromDegreesArray(positionArr),
          material: new Cesium.ImageMaterialProperty({
            image: url,
            transparent: true,
            color: Cesium.Color.WHITE,
          }),
        },
      });
    },
    //列表item勾选事件
    dataListItemClick(e, data) {
      debugger;
      let checked = e.target.checked;
      let resdata = JSON.parse(JSON.stringify(data));
      let Pname = this.$refs.tree.getNode(data.id).parent.data.codeStr;
      this.zoneId = data.zoneId;
      resdata.codeStr = Pname;


      if (resdata.codeStr == "em") {
        if (checked) {
          getEmData(data.phase).then((res) => {
            this.echartlayers = this.drawEm(res);
          });
        } else {
          if (this.echartlayers != undefined) {
            this.echartlayers.remove();
          }
        }
        return;
      }
      if (!data.children) {
        if (data.phase) {
          // this.clearWKT()
          if (checked) {
            this.$store.dispatch("getGeoListData", data.phase).then(() => {
              debugger;
              let res = this.$store.getters.siteData;
              this.siteData[resdata.name + data.phase] = res;
              if (resdata.codeStr == "ert") {
                //ERT数据另一个表格显示
                this.ertDataList = this.ertDataList.concat(res);
                this.ertIndex = this.ertIndex + this.zIndex;
                // this.editableTabsValue = "ERT"
                this.tablesList.push("ert");
                res.forEach((data) => {
                  this.drawLine(data, "ertInfoId", "ertName");
                });
              } else if (resdata.codeStr == "remote") {
                debugger;
                this.showErroList = true;
                this.historyImageList = this.historyImageList.concat(res);
                this.historyIndex = this.historyIndex + this.zIndex;
                // this.editableTabsValue = "遥感"
                this.tablesList.push("remote");
                return;
              } else {
                this.siteDataList = this.siteDataList.concat(res);
                this.siteIndex = this.siteIndex + this.zIndex;
                // this.editableTabsValue = "监测"
                this.tablesList.push("drill");
                res.forEach((data) => {
                  this.drawPoint(data, "id", "name");
                });
              }
              if (res.length == 0) {
                this.msgError("该批次无数据信息！");
              }
              if (resdata.codeStr == "drill") {
                //弹出配置项页面
                this.getPnameData(resdata);
                this.getDepthRangeData(resdata);
              }
              this.dataToSite.dataType = Pname;
            });
          } else {
            if (resdata.codeStr == "drill") {
              this.pnameList = [];
            }
            if (!this.siteData[resdata.name + data.phase]) {
              return;
            }
            this.siteData[resdata.name + data.phase].forEach((data) => {
              // 通过id删除 codeStr: "drill"
              let geoId = data["ertInfoId"] + data["ertName"];
              var index = this.geoIds.indexOf(geoId);
              if (index > -1) {
                this.geoIds.splice(index, 1);
              }
              let getByIdBox = this.viewer.entities.getById(geoId);
              this.viewer.entities.remove(getByIdBox);

              if (resdata.codeStr == "ert") {
                let i = this.ertDataList.indexOf(data);
                i > -1 && this.ertDataList.splice(i, 1);
                let name = this.tablesList.indexOf("ert");
                name > -1 && this.tablesList.splice(name, 1);
              } else if (resdata.codeStr == "remote") {
                let i = this.historyImageList.indexOf(data);
                i > -1 && this.historyImageList.splice(i, 1);
                let name = this.tablesList.indexOf("remote");
                name > -1 && this.tablesList.splice(name, 1);
              } else {
                let i = this.siteDataList.indexOf(data);
                i > -1 && this.siteDataList.splice(i, 1);
                let name = this.tablesList.indexOf("drill");
                name > -1 && this.tablesList.splice(name, 1);
              }
            });
            delete this.siteData[resdata.name + data.phase];
          }
        }
      }
    },
    //获取项目列表
    getProjectList() {
      debugger
      listProject(1).then((response) => {
        this.projectListData = response.data;
      });
    },
    //项目选择确认
    submitForm() {
      this.projectId = this.checkedProject.projectId;
      this.projectName = this.checkedProject.projectName;
      // this.$router.push({ path: "/data/data",params:{ID:this.checkedProject.projectId},query:{projectName:this.checkedProject.projectName},replace: true});
      this.selectProject = false;
    },
    // 项目选择取消
    cancel() {
      this.selectProject = false;
    },
    //项目切换按钮
    resetproject() {
      this.selectProject = true;
    },
    //关闭钻孔渲染
    closeWms() {
      this.radio = "";
      this.removeLayerImage(this.layerImgUrl);
    },
    // 右击按钮
    rightClick(e, data, node) {
      if (!data.phase && data.methodId) {
        this.uploaddata.zoneName = node.parent.data.name;
        this.uploaddata.projectId = data.projectId;
        this.uploaddata.zoneId = data.zoneId;
        this.uploaddata.methodId = data.methodId;
        this.uploaddata.methodName = data.name;
        const menuMinWidth = 10;
        const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
        const offsetWidth = this.$el.offsetWidth; // container width
        const maxLeft = offsetWidth - menuMinWidth; // left boundary
        const left = e.clientX - offsetLeft + 15; // 15: margin right
        this.top = e.clientY - 80;
        this.visible = true;
      } else {
        this.visible = false;
      }
    },
    //右击确认
    openUploadPage(data, node) {
      debugger
      if (!data.phase && data.methodId) {
        this.uploaddata.zoneName = node.parent.data.name;
        this.uploaddata.projectId = data.projectId;
        this.uploaddata.zoneId = data.zoneId;
        this.uploaddata.methodId = data.methodId;
        this.uploaddata.methodName = data.name;
        this.uploaddata.codeStr = data.codeStr;
        this.$router.push({ name: "Manage", query: this.uploaddata });
      }
    },
    //取消右击显示
    closeMenu() {
      this.visible = false;
    },
    //获取分区列表
    getZoneLists() {
      debugger;
      getProjectPhase(this.projectId).then((res) => {
        this.zoneMethods = res.data;
        this.zoneMethods.map((item1) => {
          if (item1.theGeom) {
            this.drawWKT2(item1, "projectId", "zoneId");
          }
          this.defaultExpandedKeys.push(item1.zoneId);
          item1.id = item1.zoneId;
          if (item1.children) {
            item1.children.map((item2) => {
              item2.id = item2.methodId;
              if (item2.children) {
                item2.children.map((item3) => {
                  item3.id = item3.phase + item3.methodId;
                });
                // }
              }
            });
          }
        });
      });
    },
    //三维影像
    cesiumMap(mapType) {
      this.cesiumShow = true;
      this.showMapType = mapType;
    },
    //渲染三维地图
    setCesiumMap() {
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t1.tianditu.com/img_c/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={TileMatrix}&layer=img&style=default&tilerow={TileRow}&tilecol={TileCol}&tilematrixset=c&format=tiles&tk=df5b7775fab31595f6c43caadb9af47d",
          layer: "img",
          style: "default",
          format: "tiles",
          tileMatrixSetID: "c",
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
          maximumLevel: 17,
          tilingScheme: new Cesium.GeographicTilingScheme(),
          tileMatrixLabels: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
          ],
        }),
        baseLayerPicker: false,
        animation: false,
        timeline: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        fullscreenButton: false,
        vrButton: false,
        infoBox: false,
        selectionIndicator: false,
      });
      //天地图影像中文标记服务（经纬度）
      var tdtCva = new Cesium.WebMapTileServiceImageryProvider({
        url:
          "http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
          "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
          "&style=default&format=tiles&tk=df5b7775fab31595f6c43caadb9af47d",
        layer: "tdtCva",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "c",
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tilingScheme: new Cesium.GeographicTilingScheme(),
        tileMatrixLabels: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
        ],
        maximumLevel: 18,
        show: false,
      });
      var layers = this.viewer.imageryLayers;
      layers.addImageryProvider(tdtCva);
    },
    //课题二：改变数据点集
    topicCheckChange(data, index) {
      this.topicCurrent = index;
      let url = "undefined";
      if (data.id == "1") {
        url = "new_json.json";
      } else if (data.id == "2") {
        url = "third_json.json";
      } else if (data.id == "3") {
        url = "second_json.json";
      } else if (data.id == "4") {
        url = "forth_json.json";
      } else {
        url = "fifth_json.json";
      }
      this.cesiumMap("3Dserver");
      this.viewer.camera.flyTo({
        // fromDegrees()方法，将经纬度和高程转换为世界坐标
        destination: Cesium.Cartesian3.fromDegrees(
          113.25204863058993,
          23.083977954618362,
          1500.0
        ),
      });
      if (this.pointPrimitives) {
        this.pointPrimitives.removeAll();
      }
      this.pointPrimitives = this.viewer.scene.primitives.add(
        new Cesium.PointPrimitiveCollection()
      );
      this.loading = true;
      // require("./SampleData/"+url)
      var that = this;
      Cesium.Resource.fetchJson("./SampleData/" + url)
        .then(function (dataJson) {
          for (var x = 0; x < 1; x++) {
            var series = dataJson[x];
            var seriesName = series[0];
            var coordinates = dataJson[1];
            let testdata = [23.083978, 113.2520487, 15, 700];
            for (var i = 0; i < coordinates.length; i++) {
              var latitude = coordinates[i][1];
              var longitude = coordinates[i][0];
              var height = coordinates[i][2];
              var colorHsl = coordinates[i][3] < 0 ? 0 : coordinates[i][3];
              if (colorHsl === 0) {
                continue;
              }
              var entity = {
                position: Cesium.Cartesian3.fromDegrees(
                  longitude,
                  latitude,
                  15 - height
                ),
                color: Cesium.Color.fromHsl(
                  0.6 - (colorHsl / 8000) * 0.5,
                  1.0,
                  0.5
                ),
                pixelSize: 2,
              };
              that.pointPrimitives.add(entity);
            }
          }
          that.loading = false;
        })
        .otherwise(function (error) {
          //Otherwise will catch any errors or exceptions that occur
          //during the promise processing. When this happens,
          //we raise the error event and reject the promise.
          return Cesium.when.reject(error);
        });
    },
    //绘制可点击dian
    drawPoint(geomstring, objId, objName) {
      let wkt = geomstring.theGeom;
      let geoData = this.getGeoType(wkt);
      let geoId = geomstring[objId] + geomstring[objName];
      this.geoIds.push(geoId);
      var pointGeometry = this.viewer.entities.add({
        name: geomstring[objName],
        // position: Cesium.Cartesian3.fromDegreesArrayHeights(geoData.position),
        id: geoId,
        features: geomstring,
        point: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(
            geoData.position
          ),
          color: Cesium.Color.SKYBLUE,
          pixelSize: 10,
          outlineColor: Cesium.Color.YELLOW,
          outlineWidth: 3,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
      });
    },
    //绘制可点击线
    drawLine(geomstring, objId, objName) {
      if (this.Ertpointobj.checked2) {
        this.drawLinePiont(geomstring);
      }
      if (this.Ertpointobj.checked3D) {
        //默认绘制线墙
        this.drawLineWall(geomstring, objId, objName);
      }
      let wkt = geomstring.theGeom;
      let geoData = this.getGeoType(wkt);
      let geoId = geomstring[objId] + geomstring[objName];
      this.geoIds.push(geoId);
      var pointGeometry = this.viewer.entities.add({
        name: geomstring[objName],
        // position: Cesium.Cartesian3.fromDegreesArrayHeights(geoData.position),
        features: geomstring,
        id: geoId,
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(
            geoData.position
          ),
          width: this.Ertpointobj.width,
          material: Cesium.Color.fromCssColorString(this.Ertpointobj.color),
          clampToGround: true,
        },
      });
      this.viewer.flyTo(pointGeometry);
    },
    //绘制电极点
    drawLinePiont(geomstring) {
      this.removeLinePiont(geomstring);
      let wkt = geomstring.theGeom;
      let geoData = this.getGeoType(wkt);
      if (geoData.pointList.length > 0) {
        geoData.pointList.forEach((item) => {
          let geoId = item[0] + "," + item[1];
          // this.geoIds.push(geoId)
          this.viewer.entities.add({
            // fromDegrees（经度，纬度，高度，椭球，结果）从以度为单位的经度和纬度值返回Cartesian3位置
            id: geoId,
            position: Cesium.Cartesian3.fromDegrees(item[0], item[1], item[2]),
            point: {
              // 点的大小（像素）
              pixelSize: 5,
              // 点位颜色，fromCssColorString 可以直接使用CSS颜色
              color: Cesium.Color.fromCssColorString("#ee0000"),
              // 边框颜色
              outlineColor: Cesium.Color.fromCssColorString("#fff"),
              // 边框宽度(像素)
              outlineWidth: 2,
              // 是否显示
              show: true,
            },
          });
        });
      }
    },
    //移除电极点
    removeLinePiont(geomstring) {
      let wkt = geomstring.theGeom;
      let geoData = this.getGeoType(wkt);
      if (geoData.pointList.length > 0) {
        geoData.pointList.forEach((item) => {
          let geoId = item[0] + "," + item[1];
          let getByIdBox = this.viewer.entities.getById(geoId);
          this.viewer.entities.remove(getByIdBox);
        });
      }
    },
    //绘制线墙
    drawLineWall(geomstring, objId, objName) {
      if (this.Ertpointobj.checked2) {
        this.drawLinePiont(geomstring);
      }
      let wkt = geomstring.theGeom;
      let geoData = this.getGeoType(wkt);
      let geoId = geomstring[objId] + geomstring[objName] + "wall";
      // this.geoIds.push(geoId)
      let minimumHeights = [],
        maximumHeights = [];
      if (geoData.pointList.length > 0) {
        geoData.pointList.forEach((item) => {
          minimumHeights.push(0);
          maximumHeights.push(5.3);
        });
      }
      var pointGeometry = this.viewer.entities.add({
        name: geomstring[objName] + "wall",
        // position: Cesium.Cartesian3.fromDegreesArrayHeights(geoData.position),
        features: geomstring,
        id: geoId,
        wall: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(
            geoData.position
          ),
          width: this.Ertpointobj.width,
          minimumHeights: minimumHeights,
          maximumHeights: maximumHeights,
          material: new Cesium.ImageMaterialProperty({
            // color: new Cesium.Color(r/255,g/255,b/255,0.9),
            image: this.mypicture,
          }),
          clampToGround: true,
        },
      });
      this.viewer.flyTo(pointGeometry);
    },
    //移除线墙
    removeLineWall(geomstring, objId, objName) {
      let geoId = geomstring[objId] + geomstring[objName] + "wall";
      let getByIdBox = this.viewer.entities.getById(geoId);
      this.viewer.entities.remove(getByIdBox);
    },
    //绘制可点击面
    drawPolygon(geomstring, objId, objName) {
      let wkt = geomstring.theGeom;
      let geoData = this.getGeoType(wkt);
      let geoId = geomstring[objId] + geomstring[objName];
      this.geoIds.push(geoId);
      var pointGeometry = this.viewer.entities.add({
        name: geomstring[objName],
        // position: Cesium.Cartesian3.fromDegreesArrayHeights(geoData.position),
        id: geoId,
        features: geomstring,
        polygon: {
          height: 0.1,
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(
            geoData.position
          ),
          material: new Cesium.Color.fromCssColorString("#1625F0").withAlpha(
            0.1
          ),
          // fill:false,
          perPositionHeight: true,
          outline: true, //默认false，如果需要设置边框颜色需要开启设置为true
          outlineColor: Cesium.Color.fromCssColorString("rgba(255,255,255,1)"),
          outlineWidth: 1000,
        },
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(
            geoData.position
          ),
          width: 5,
          material: Cesium.Color.BLUE.withAlpha(0.8),
          clampToGround: true,
        },
      });
    },
    // ===============================================tsg====================================================
    //重置数据渲染
    restData() {
      this.errorData = []; //重置异常列表数据
      this.dataZtree.length &&
        this.dataZtree.forEach((val) => {
          if (val.children != undefined) {
            val.children.map((data) => {
              this.dataCheckChange(data, false, "null"); //清空所有绘制的图层
            });
          }
        });
      this.dataZtree = [];
    },
    //点击标签
    handleClick(tab, event) {
      // this.activeName = tab.name
      // if(tab.name=="proDataList2"){
      //     this.cesiumMap('3Dserver')
      // }
      // else if(tab.name=="proDataList"){
      //     this.setMap('mapserver')
      // }
      // if(tab.name==="projectDesign"){
      //     if(this.projectDatail.children!=undefined){
      //         this.dataZtree=[];
      //         this.Message({
      //             message:"必须先选分区",
      //             type:'error'
      //         })
      //         return false;
      //     }
      //     const zoneID = this.projectDatail.ID
      //     //获取数据列表
      //     designZtree({"zoneID":zoneID}).then(
      //         response=>{
      //             this.dataZtree= response.data.methodDesign;
      //             this.dataCheck = response.data.dataCheck;
      //             this.dataZtree.forEach((val)=>{
      //                 if(val.children!=undefined){
      //                     const showls =  val.children.filter((a)=>{
      //                         return this.dataCheck.includes(a.ID)
      //                     })
      //                     showls.length>0 && showls.map((data)=>{
      //                         this.dataCheckChange(data,"true",'null') //渲染默认勾选的数据
      //                     })
      //                 }
      //             })
      //         }
      //     )
      // }
      // else{
      this.restData();
      // }
    },
    // 获取项目列表
    getProList() {
      projectZtree().then((response) => {
        debugger;
        this.proZtreeData = response.data;
        const R = (f, s) => {
          s.map(
            (i) => (
              f(i),
              i.zoneList && i.zoneList != undefined ? R(f, i.zoneList) : 0,
              i
            )
          );
          return s;
        };
        const data = R((i) => {
          i.ID = i.projectId === undefined ? i.zoneId : i.projectId;
          i.label = i.projectName === undefined ? i.zoneName : i.projectName;
        }, this.proZtreeData);
      });
    },
    //获取异常列表
    getProData(zoneId) {
      //获取测区信息
      // let geo = res.data.theGeom.split(",")
      // this.center = [parseFloat(geo[2].split(" ")[0]) ,parseFloat(geo[2].split(" ")[1])]
      // this.createMap(this.center);
      //无绑定信息
      getRouteList(zoneId).then((res) => {
        this.clearWKT();
        if (res.data.length != 0) {
          this.$store.dispatch("getGirdData", zoneId).then(() => {
            let girdData = this.$store.getters.girdData;
            girdData.forEach((val) => {
              this.drawWKT2(val, "blockId", "createBy");
            });
            //重新获取列表
            this.$store.dispatch("getDesignData", zoneId).then(() => {
              this.errorData = this.$store.getters.featureData;
            });
          });
          res.data.forEach((val) => {
            this.drawWKT2(val, "routeId", "createBy");
            if (val.theGeom) {
              let a = val.theGeom.split(",")[2].split(" ");
              let center = [parseFloat(a[0]), parseFloat(a[1])];
              let view = this.MyMap.getView();
              view.setZoom(16);
              view.setCenter(center);
            }
          });
        } else {
          this.msgError("无数据信息！");
          this.clearWKT();
          this.errorData = [];
          return;
        }
      });
    },
    //ztree选中事件
    handleCheckChange(data, checked, node) {
      if (data.children == undefined) {
        if (checked) {
          drawWKT2(data);
        } else {
          removeWKT(data);
        }
      }
    },
    // ztree过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //数据勾选
    dataCheckChange(data, checked, node) {
      if (data.children == undefined) {
        let paramsInfo = { dataType: "", zoneID: null };
        paramsInfo.zoneID = this.projectDatail.ID;
        paramsInfo.dataType = data.dataType;
        let featureInfo =
          this.$store.getters.featureData[
            paramsInfo.dataType + paramsInfo.zoneID
          ];
        if (checked) {
          //如果数据不存在则从新获取 否则直接渲染
          if (featureInfo == undefined) {
            //通过数据类型请求数据
            this.$store
              .dispatch("getDesignData", paramsInfo)
              .then(() => {
                featureInfo =
                  this.$store.getters.featureData[
                    paramsInfo.dataType + paramsInfo.zoneID
                  ];
                this.errorData = data.dataType == "异常点" ? featureInfo : [];
                featureInfo.map((val) => {
                  drawWKT(val);
                });
              })
              .catch((error) => {
                this.Message({
                  message: "获取数据失败",
                  type: "error",
                });
              });
          } else {
            this.errorData = data.dataType == "异常点" ? featureInfo : [];
            featureInfo.map((val) => {
              drawWKT(val);
            });
          }
        } else {
          this.errorData = [];
          featureInfo &&
            featureInfo.map((val) => {
              removeWKT(val);
            });
        }
      }
    },
    ///地图操作===================================

    //监听删除异常,成功后调用
    deleteChange(value) {
      if (value) {
        this.errorData.forEach((item) => {
          this.removeWKT(item, "abnormalId", "abName");
        });
        //重新获取列表
        this.$store.dispatch("getDesignData", this.zoneId).then(() => {
          this.errorData = this.$store.getters.featureData;
        });
      }
    },
    //创建地图

    // 设置底图 地图切换

    //绘制地区图形边界
    drawWKT2(geomstring, objId, objName) {
      let wkt = geomstring.theGeom;
      let geoData = this.getGeoType(wkt);
      let geoId = geomstring[objId] + geomstring[objName];
      var pointGeometry = this.viewer.entities.add({
        name: geomstring[objName],
        // position: Cesium.Cartesian3.fromDegreesArrayHeights(geoData.position),
        id: geoId,
        polygon: {
          height: 0.1,
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(
            geoData.position
          ),
          material: new Cesium.Color.fromCssColorString("#1625F0").withAlpha(
            0.1
          ),
          // fill:false,
          perPositionHeight: true,
          outline: true, //默认false，如果需要设置边框颜色需要开启设置为true
          outlineColor: Cesium.Color.fromCssColorString("rgba(255,255,255,1)"),
          outlineWidth: 1000,
        },
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(
            geoData.position
          ),
          width: 5,
          material: Cesium.Color.BLUE.withAlpha(0.8),
          clampToGround: true,
        },
      });
      this.viewer.flyTo(pointGeometry);
    },
    //初始化弹窗
    initTool(frameDiv) {
      var handler = new Cesium.ScreenSpaceEventHandler(
        this.viewer.scene.canvas
      );
      handler.setInputAction((movement) => {
        var pick = this.viewer.scene.pick(movement.position);
        if (Cesium.defined(pick) && this.geoIds.indexOf(pick.id.id) != -1) {
          this.poiClick(pick.id);
          // 屏幕坐标转世界坐标——关键点
          const ellipsoid = this.viewer.scene.globe.ellipsoid;
          const cartesian = this.viewer.camera.pickEllipsoid(
            movement.position,
            ellipsoid
          );
          //将笛卡尔坐标转换为地理坐标
          const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          //将弧度转为度的十进制度表示
          const lon = Cesium.Math.toDegrees(cartographic.longitude);
          const lat = Cesium.Math.toDegrees(cartographic.latitude);
          const point2 = { longitude: lon, latitude: lat };
          this.click_point = Cesium.Cartesian3.fromDegrees(
            point2.longitude,
            point2.latitude
          );
          this.c = new Cesium.Cartesian2(
            movement.position.x,
            movement.position.y
          );
          this.target_position = movement.position;
          this.cartesian_2 = cartesian;
          if (cartesian) {
            this.showAt(movement.position);
          } else {
            this.setVisible(false);
          }
        } else {
          this.setVisible(false);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      if (this.isInit) {
        return 0;
      }
      //弹窗容器div
      this.addDiv = document.getElementById("popup"); //
      this.isInit = true;
      this.viewer.scene.camera.moveStart.addEventListener(() => {
        this.removeHandler = this.viewer.scene.postRender.addEventListener(
          () => {
            if (this.c && this.isShow) {
              this.isVisible = new Cesium.EllipsoidalOccluder(
                Cesium.Ellipsoid.WGS84,
                this.viewer.camera.position
              ).isPointVisible(this.click_point);
              if (this.isVisible === false) {
                this.setVisible(false);
              } else {
                this.changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                  this.viewer.scene,
                  this.cartesian_2
                );
                this.showAt(this.changedC);
                this.c = this.changedC;
              }
            }
          }
        );
      });
      //相机移动结束事件
      this.viewer.scene.camera.moveEnd.addEventListener(() => {
        this.removeHandler.call();
      });
    },
    //控制弹窗显隐
    setVisible(visible) {
      if (!this.isInit) {
        return 0;
      }
      this.addDiv.style.display = visible ? "block" : "none";
      this.isShow = visible ? true : false;
    },

    //控制弹窗定位
    showAt(position) {
      if (!this.isInit) {
        return 0;
      }
      if (position) {
        this.setVisible(true);
        this.addDiv.style.left = position.x - 50 + "px";
        this.addDiv.style.top = position.y - 480 + "px";
      }
    },
    //移除绘制图层
    removeWKT(geomstring, objId, objName) {},
    //清除所有图层
    clearWKT() {},
    //列表要素点击事件
    flyToFeature(dataFeature, objId, objName) {},
    //图层点击事件
    poiClick(feature) {
      if (feature != undefined) {
        let propertiesVal = feature.features;
        this.$store.dispatch("changClickMap", propertiesVal); //图层点击
        // console.log(propertiesVal)
        if (typeof jsToNative == "function" && propertiesVal.bstatus) {
          jsToNative("EnterBlockAnalyze", propertiesVal.blockId);
        }
      } else {
        this.$store.dispatch("changClickMap", {});
      }
    },
    /**计算中心点坐标 */
    getCoordinate(feature, evt) {},
    //数据类型判断
    getGeoType(geo) {
      // LINESTRING(117.015170654331 36.7034668198078,117.015173963667 36.703551660475,117.01516598 36.703663875642,117.015160438667 36.703810268475,117.015162639667 36.7039115883078,117.015166639 36.7042639033078,117.015160470831 36.7044504423078,117.015165176667 36.7046563251419,117.015165771667 36.704837918475,117.015166781831 36.7048595498078,117.015164191331 36.7049263533078,117.015156608331 36.705042070475,117.0151549565 36.7051173723078,117.015154420167 36.7052309016419,117.0151333075 36.7054004873078,117.015125088167 36.7055945236419,117.0151327915 36.705780769975,117.0151402245 36.7060262623078,117.015138320331 36.706141514475)"
      // POINT(117.013689 36.709376)
      // MULTIPOLYGON(((113.251779999817 23.0851405180112,113.252113232721 23.0839299984811,113.254616358811 23.0846397919126,113.255132730875 23.0848140857784,113.254554673796 23.0860858113522,113.254063176304 23.0859042090727,113.253496822784 23.0856868873733,113.253002909831 23.0855090787102,113.251779999817 23.0851405180112)))
      if (geo.indexOf("POLYGON") != -1 && geo.indexOf("MULTIPOLYGON") == -1) {
        let geoTag = geo
          .replace("POLYGON", "")
          .replace(/\(|\)/g, "")
          .split(",");
        let geolist = [];
        let pointList = [];
        geoTag.map((item) => {
          let items = item.split(" ");
          let lng = parseFloat(items[0]),
            lat = parseFloat(items[1]);
          geolist.push(lng);
          geolist.push(lat);
          geolist.push(0);
          pointList.push([lng, lat, 0]);
        });
        let geoObj = {
          position: geolist,
          geotype: "polygon",
          pointList: pointList,
        };
        return geoObj;
      } else if (geo.indexOf("LINESTRING") != -1) {
        let geoTag = geo
          .replace("LINESTRING", "")
          .replace(/\(|\)/g, "")
          .split(",");
        let geolist = [];
        let pointList = [];
        geoTag.map((item) => {
          let items = item.split(" ");
          let lng = parseFloat(items[0]),
            lat = parseFloat(items[1]);
          geolist.push(lng);
          geolist.push(lat);
          geolist.push(0);
          pointList.push([lng, lat, 0]);
        });
        let geoObj = {
          position: geolist,
          pointList: pointList,
          geotype: "polyline",
        };
        return geoObj;
      } else if (geo.indexOf("MULTIPOLYGON") != -1) {
        let geoTag = geo
          .replace("MULTIPOLYGON", "")
          .replace(/\(|\)/g, "")
          .split(",");
        let geolist = [];
        let pointList = [];
        geoTag.map((item) => {
          let items = item.split(" ");
          let lng = parseFloat(items[0]),
            lat = parseFloat(items[1]);
          geolist.push(lng);
          geolist.push(lat);
          geolist.push(0);
          pointList.push([lng, lat, 0]);
        });
        let geoObj = {
          position: geolist,
          pointList: pointList,
          geotype: "polygon",
        };
        return geoObj;
      } else if (geo.indexOf("minLine") != -1) {
        return "minLine";
      } else if (geo.indexOf("POINT") != -1) {
        let geoTag = geo
          .replace("POINT", "")
          .replace(/\(|\)/g, "")
          .replace(/\(|\)/g, "")
          .split(" ");
        let geolist = [];
        geolist.push(parseFloat(geoTag[0]));
        geolist.push(parseFloat(geoTag[1]));
        geolist.push(0);
        let geoObj = {
          position: geolist,
          geotype: "point",
        };
        return geoObj;
      } else if (geo.indexOf("ICON") != -1) {
        return "ICON";
      } else if (geo.indexOf("oldICON") != -1) {
        return "oldICON";
      } else {
        return "";
      }
    },
    //添加wms服务
    addWMS(url) {},
    //移除wms图层
    removeWMS(url) {},
    //添加热力图
    addHeatPic(val) {},
    //获取钻孔属性值
    getPnameData(params) {
      getPname(params).then((res) => {
        this.pnameList = res.data;
      });
    },
    //获取钻孔高度范围
    getDepthRangeData(params) {
      getDepthRange(params).then((res) => {
        if (res.data.maxdep > 15) {
          this.pheightList = res.data.maxdep;
        }
      });
    },
    //添加等值面
    addlayerImage(data) {},
    //添加历史遥感
    addHistoryImage(data) {
      debugger;
      this.removeLayerImage();
      let extent = JSON.parse(data.range);
      let rectangle = Cesium.Rectangle.fromDegrees(
        extent[0],
        extent[1],
        extent[2],
        extent[3]
      );
      let url = data.fileId;
      this.historygeoId = this.viewer.imageryLayers.addImageryProvider(
        new Cesium.SingleTileImageryProvider({
          // url:"../images/label/yellow.png",
          id: data.fileId,
          url: this.baseUrl + url,
          rectangle: rectangle,
        })
      );
      // this.viewer.camera.setView({
      //     destination: rectangle //定位坐标点，建议使用谷歌地球坐标位置无偏差
      // });
    },
    removeLayerImage() {
      if (this.historygeoId) {
        this.viewer.imageryLayers.remove(this.historygeoId);
        this.historygeoId = null;
      }
    },
    //钻孔开遍数值或深度
    changePic() {
      console.log(this.sliderValue + "=====" + this.radio);
      if (!this.radio) {
        this.msgInfo("未选择属性");
        return;
      }
      let params = {
        projectId: this.projectId,
        zoneId: this.zoneId,
        pname: this.radio,
        mindep: this.sliderValue[0],
        maxdep: this.sliderValue[1],
      };
      getRenderDrillImg(params).then((res) => {
        this.addlayerImage(res.data);
      });
    },
    //监听配置操作变换
    selectChange(selection, type) {
      if (type == "遥感") {
        if (selection.length) {
          this.addHistoryImage(selection[0]);
        } else {
          this.removeLayerImage();
        }
      } else if (type == "ERTCHECK") {
        this.ertDataList.forEach((item) => {
          if (selection) {
            this.Ertpointobj.checked2 = true;
            this.drawLinePiont(item);
          } else {
            this.Ertpointobj.checked2 = false;
            this.removeLinePiont(item);
          }
        });
      } else if (type == "ERTERRO") {
        this.ertDataList.forEach((item) => {
          if (selection) {
            this.Ertpointobj.checkedErro = true;
            this.drawLinePiont(item);
          } else {
            this.Ertpointobj.checkedErro = false;
            this.removeLinePiont(item);
          }
        });
      } else if (type == "ERTCOLOR") {
        this.Ertpointobj.color = selection;
        this.ertDataList.forEach((item) => {
          let id = item["ertInfoId"] + item["ertName"];
          this.viewer.entities.getById(id).polyline.material =
            Cesium.Color.fromCssColorString(selection);
        });
      } else if (type == "ERTWIDTH") {
        this.Ertpointobj.width = selection;
        this.ertDataList.forEach((item) => {
          let id = item["ertInfoId"] + item["ertName"];
          this.viewer.entities.getById(id).polyline.width = selection;
        });
      } else if (type == "ERT3D") {
        this.Ertpointobj.checked3D = selection;
        this.ertDataList.forEach((item) => {
          if (selection) {
            this.drawLineWall(item, "ertInfoId", "ertName");
          } else {
            this.removeLineWall(item, "ertInfoId", "ertName");
          }
        });
      }
    },
    //左边移动框
    taggleLeftList() {
      this.showLeftList = !this.showLeftList;
    },
    /**显示异常列表按钮 */
    taggleErroList() {
      this.showErroList = !this.showErroList;
    },
    //右侧列表展示与否
    taggleRightList() {
      this.showRightList = !this.showRightList;
    },
    //结合echert绘制热力图
    drawEm(list) {},
    removeEm() {
      if (this.echartlayers) {
        this.echartlayers.remove();
      }
    },
    //打开反演图
    openERTImage(val) {
      this.showImage = true;
    },
    //关闭弹窗
    closePopup() {
      this.setVisible(false);
    },
  },
};
</script>
<style scoped lang="scss">
.cav-map {
  height: calc(100vh - 120px);
  position: relative;
  overflow: hidden;
}
.description {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  margin-block-end: 0px;
  margin-block-start: 0px;
}

.clearfix .el-form-item {
  margin-bottom: 5px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: ""; /*不用有内容也可以*/
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}
.delete {
  margin-top: 25px;
  margin-left: 1px;
}
.formbox {
  /* padding:20px 20px; */
}
.projectManage {
  height: 100%;
  width: 100%;
  background: white;
  margin-bottom: 10px;
}
.addPro {
  text-align: center;
}
.addPro button {
  display: inline-block;
  margin-top: 15px;
}
.projectCard {
  height: 100%;
}
.dataListItem {
  height: calc(100vh - 120px);
  overflow: auto;
}
.proDatail .el-card__body {
  padding: 0px 0px;
}
.proDatail ul {
  padding: 0px;
  margin: 0px;
}
.list-group-item {
  border: none;
  padding: 8px 0px;
}
.list-group-item label {
  display: inline-block;
  width: 25%;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.list-group-item .pull-left {
  margin-left: 7%;
  display: inline-block;
  text-align: left;
  width: 68%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.DatailCard {
  padding: 0px 6px;
}
.proDatail {
  margin-top: 30px;
}

.otherInfo,
.proInfo {
  padding: 0px 40px;
}
.el-tag + .el-tag {
  margin-left: 10px;
  margin-bottom: 10px;
}
.ztreeNode {
  display: inline-block;
  float: right;
}
.projectBox {
  /* max-height: 340px; */
  overflow-x: hidden;
  overflow-y: scroll;
  height: 700px;
  font-size: 13px;
  padding: 0 10px;
}
.projectBox::-webkit-scrollbar {
  display: none;
}
.custom-tree-node {
  display: flex;
  align-items: center;
  font-size: 14px;
  .checkbox {
    display: inline-block;
    input[type="checkbox" i] {
    }
  }
  width: 100%;
  .uploadIcon {
    display: inline-block;
    position: absolute;
    right: 20px;
    // bottom: 5px;
    .el-button {
      padding: 0px;
    }
  }
}
.custom-tree-node .node-text {
  display: inline-block;
  width: 70%;
  white-space: nowrap;
  /* text-overflow: ellipsis; */
  overflow: hidden;
}
.node-text::-webkit-scrollbar {
  display: none;
}
#map {
  width: 100%;
  height: 100%;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  /* overflow: hidden; */
}
.setMap {
  position: absolute;
  bottom: 5px;
  right: 20px;
  padding: 4px;
  background: #fff;
  width: 218px;
  box-sizing: border-box;
  display: flex;
  display: -webkit-flex; /* Safari */
  justify-content: space-between;
  align-items: center;
}
.setMap .active {
  border: 2px $main-color solid;
}
.mapbox {
  width: 100px;
  height: 70px;
  /* border: 1px #fff solid; */
  background-size: 50% 50%;
  background-position: 0px 0px;
  cursor: pointer;
  position: relative;
}
.mapbox:hover {
  border: 2px $main-color solid;
}
.mapbox span {
  text-align: center;
  display: inline-block;
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-image: linear-gradient(
    to top,
    $main-color 0%,
    rgba(46, 139, 231, 0) 100%
  );
  color: #fff;
}
.mapserver {
  display: inline-block;
  background: url("../../assets/images/map_server.png") no-repeat;
}
.imgserver {
  display: inline-block;
  background: url("../../assets/images/img_serve.png") no-repeat;
}
.threeDserver {
  display: inline-block;
  background: url("../../assets/images/3Dserver.jpg") no-repeat;
}
.erro-list-group {
  position: relative;
  width: 100%;
  .erro-list {
    position: absolute;
    bottom: 0;
    transition: bottom 0.5s;
    padding: 0px;
    width: 100%;
  }
  .hiddenList {
    bottom: -350px !important;
  }
  .erro-list-show {
    display: flex;
    justify-content: center;
  }
  .erro-list-show button {
    /* display: flex;
        justify-content: center;
        align-items: center; */
    padding-top: 3px;
    padding-bottom: 5px;
    /* border: 0px; */
    /* background: #DADDE9; */
    border-radius: 4px 4px 0px 0px;
    width: 96px;
    height: 18px;
  }
}
.right-list-group {
  position: absolute;
  height: 100%;
  width: 10px;
  top: 0px;
  right: 0px;
  z-index: 100;
  .content-list {
    position: absolute;
    right: 0px;
    transition: right 0.5s;
    padding: 0px;
    width: 380px;
    height: 100%;
    background: #fff;
  }
  .contentHiddenList {
    right: -380px !important;
  }
  .content-list-show {
    position: absolute;
    top: 50%;
    left: -57px;
    transform: rotate(-90deg);
  }
  .content-list-show button {
    /* display: flex;
        justify-content: center;
        align-items: center; */
    padding-top: 3px;
    padding-bottom: 5px;
    /* border: 0px; */
    /* background: #DADDE9; */
    border-radius: 4px 4px 0px 0px;
    width: 96px;
    height: 18px;
  }
}
.left-list-group {
  position: absolute;
  height: 100%;
  width: 10px;
  top: 0px;
  left: 0px;
  z-index: 100;
  .content-list {
    position: absolute;
    left: 0px;
    transition: left 0.5s;
    padding: 0px;
    width: 280px;
    height: 100%;
    // background: #3066FF;
  }
  .contentHiddenList {
    left: -280px !important;
  }
  .content-list-show {
    position: absolute;
    top: 50%;
    right: -57px;
    transform: rotate(90deg);
  }
  .content-list-show button {
    /* display: flex;
        justify-content: center;
        align-items: center; */
    padding-top: 3px;
    padding-bottom: 5px;
    /* border: 0px; */
    /* background: #DADDE9; */
    border-radius: 4px 4px 0px 0px;
    width: 96px;
    height: 18px;
  }
}

.a-focus {
  // color: $main-color;
  background: RGB(21, 86, 239, 0.5) !important;
}
.project-list {
  margin: 0px 0px 20px 0px;
  padding: 0;
  list-style: none;
}
.project-list__item:hover {
  background-color: #f5f7fa;
  outline: none;
  color: $main-color;
  cursor: pointer;
}
.project-list__item:focus {
  outline: none;
}
.project-list__item:first-child {
  margin-top: 10px;
}
.project-list__item {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  font-size: 14px;
  color: #606266;
  line-height: 1.8;
  margin-top: 5px;
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
  width: 100%;
}
.project-list__item-name {
  color: #606266;
  display: inline-block;
  margin-right: 10px;
  width: 80%;
  padding-left: 4px;
  transition: color 0.3s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.block {
  position: absolute;
  top: 30px;
  right: 20px;
  padding: 10px;
  background: #fff;
  width: 350px;
  box-sizing: border-box;
  background: rgba(191, 191, 191, 0.8);
  .icon {
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 16px;
    cursor: pointer;
    color: #000;
  }
  .row {
    display: flex;
    display: -webkit-flex; /* Safari */
    justify-content: space-between;
    align-items: center;
    span {
      display: inline-block;
    }
    .slider {
      width: 75%;
      display: inline-block;
    }
  }
  .el_radio {
    padding: 5px;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

//右击弹框
.contextmenu {
  margin: 0;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  background: #fff;
  padding: 5px 0;
  color: #333;
}
.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}
.contextmenu li:hover {
  color: #3066ff;
}
.dialogBox {
  width: 30%;
  padding: 0px 20px;
}
.projectManages {
  .projectName {
    padding: 8px 0px;
    border-bottom: 1px solid #dadde9;
    border-top: 1px solid #dadde9;
    display: flex;
    justify-content: space-between;
    .name {
      width: 60%;
      padding: inherit;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .projectBtn {
      float: right;
    }
  }
}
</style>
